import { Button, Modal } from "antd";
import { useEffect } from "react";
import TextArea from "antd/es/input/TextArea";

/**
 * 编辑用户介绍模态框组件
 *
 * @returns {JSX.Element}
 * @constructor
 */
const UserIntroEdit = (props) => {
    const {
        editUserModalVisible,
        setEditUserModalVisible,
        userDetail,
        editUserParam,
        setEditUserParam,
        editUserById
    } = props;

    /**
     * 关闭基础资料编辑模态框
     */
    const closeUserIntroductionEditModal = () => {
        setEditUserModalVisible({
            ...editUserModalVisible,
            introductionEdit: false
        });
        setEditUserParam({});
    }

    useEffect(() => {
        if (editUserModalVisible.introductionEdit) {
            setEditUserParam({
                userIntroduction: userDetail.userIntroduction
            });
        }
        // eslint-disable-next-line
    }, [editUserModalVisible.introductionEdit]);

    return (
        <Modal
            open={editUserModalVisible.introductionEdit}
            title="用户个人介绍编辑"
            onCancel={() => closeUserIntroductionEditModal()}
            // 底部区域优化：消除与主体的间隙，避免溢出
            footer={
                <div style={{
                    padding: '16px 24px',
                    borderTop: '1px solid #f0f0f0',
                    backgroundColor: '#fff',
                    margin: 0, // 移除默认margin
                    boxSizing: 'border-box', // 确保尺寸计算正确
                    width: '100%' // 确保footer宽度与模态框一致，避免右侧溢出
                }}>
                    <Button
                        type="primary"
                        style={{
                            borderRadius: '8px',
                            padding: '8px 20px',
                            backgroundColor: '#4096ff',
                            borderColor: '#4096ff',
                            fontSize: '14px',
                            transition: 'all 0.2s'
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#69b1ff';
                            e.currentTarget.style.borderColor = '#69b1ff';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = '#4096ff';
                            e.currentTarget.style.borderColor = '#4096ff';
                        }}
                        onClick={() => {
                            editUserById({
                                userNickname: userDetail.userNickname,
                                userGender: userDetail.userGender,
                                userIntroduction: editUserParam.userIntroduction
                            });
                            closeUserIntroductionEditModal();
                        }}
                    >
                        编辑
                    </Button>
                    <Button
                        danger={true}
                        style={{
                            marginLeft: '12px',
                            borderRadius: '8px',
                            padding: '8px 20px',
                            backgroundColor: '#fff',
                            color: '#ff4d4f',
                            borderColor: '#ff4d4f',
                            fontSize: '14px',
                            transition: 'all 0.2s'
                        }}
                        onClick={() => closeUserIntroductionEditModal()}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff5f5';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff';
                        }}
                    >
                        关闭
                    </Button>
                </div>
            }
        >
            {/* 表单容器 */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                {/* 个人介绍输入项 */}
                <div style={{marginTop: '8px'}}>
                    <TextArea
                        value={editUserParam.userIntroduction}
                        onChange={(e) => {
                            setEditUserParam({
                                ...editUserParam,
                                userIntroduction: e.target.value
                            });
                        }}
                        placeholder="请输入用户个人介绍"
                        autoSize={{ minRows: 6, maxRows: 12 }}
                        style={{
                            borderRadius: '8px',
                            padding: '12px 16px',
                            border: '1px solid #e5e7eb',
                            backgroundColor: '#ffffff',
                            fontSize: '14px',
                            lineHeight: '1.5',
                            transition: 'all 0.2s ease',
                            boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
                            boxSizing: 'border-box', // 确保输入框尺寸计算正确
                            width: '100%' // 避免输入框溢出导致底部异常
                        }}
                    />
                </div>
            </div>
        </Modal>
    )
}

export default UserIntroEdit;